<template>
	<view class="cart-container">
		<!-- 地址区域 -->
		<view class="cart-adress">
			<view class="btn" v-if="JSON.stringify(address) === '{}'">
				<button type="primary" size="mini" class="btnChooseAddress" @click="chooseAddress">请选择收货地址+</button>
			</view>
			<view class="adress" v-else @click="chooseAddress">
				<view class="row1">
					<view>收货人：{{ address.userName }}</view>
					<view class="phone">电话：{{ address.telNumber }}</view>
				</view>
				<view class="row2">
					<view class="adr">收货地址:</view>
					<view>{{ address.provinceName+address.cityName+address.countyName+address.detailInfo }}</view>
				</view>
			</view>
			<!-- 分割线 -->
			<image src="/static/cart_border@2x.png"></image>
		</view>
		<!-- 图标区域 -->
		<view class="cart-icon">
			<uni-icons type="shop" size="18"></uni-icons>
			<text class="cart-title-text">购物车</text>
		</view>
		<block v-if="total!==0">
			<!-- 购物车商品区域 -->
			<view class="cart-goods">
				<uni-swipe-action>
					<block v-for="(item,index) in cart" :key="index">
						<uni-swipe-action-item :options="options" @click="swipeActionClickHandler(index)">
							<view class="cart-list-item" @click="gotoDetail(item)">
								<!-- 左部勾选框 -->
								<view class="radio">
									<radio :checked="item.goods_state" color="#f00" @click.stop="cartDataUpdataState(index)"></radio>
								</view>
								<!-- 中间图片 -->
								<view class="cart-list-item-left">
									<!-- 图片 -->
									<image class="cart-pic" :src="item.goods_small_logo || defaultPic"></image>
								</view>
								<!-- 右部 -->
								<view class="cart-list-item-right">
									<!-- 标题 -->
									<view class="cart-title">
										{{item.goods_name}}
									</view>
									<!-- 价格 -->
									<view class="cart-price">
										<text>￥{{item.goods_price | tofixed}}</text>
										<!-- 数字框 -->
										<view @click.stop>
											<uni-number-box :min="1" :value="item.goods_count" @change="countChange($event,index)"></uni-number-box>
										</view>
									</view>
								</view>
							</view>
						</uni-swipe-action-item>
					</block>
				</uni-swipe-action>
			</view>
			<!-- 结算区域 -->
			<view class="cart-pay">
				<my-settle></my-settle>
			</view>
		</block>
		<block v-else>
			<image src="/static/empty.jpg" class="emptyImg"></image>
		</block>
	</view>
</template>

<script>
	// 导入获取购物车角标方法
	import badegeMix from '@/mixins/tabbar-badge.js'
	// 导入vuex全局数据
	import {
		mapState,
		mapMutations,
		mapGetters
	} from 'vuex'
	export default {
		computed: {
			// 映射全局变量vuex里的cart
			...mapState('my_cart', ['cart']),
			...mapState('my_user', ['address'])
		},
		mixins: [badegeMix],
		data() {
			return {
				// 默认图片地址
				defaultPic: 'https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png',
				// 左滑删除配置
				options: [{
					text: '删除', // 显示的文本内容
					style: {
						backgroundColor: '#C00000' // 按钮的背景颜色
					}
				}],
			}
		},
		filters: {
			// 强制转化2位小数
			tofixed(num) {
				return Number(num).toFixed(2)
			}
		},
		watch: {
			// 监听全局变量
			total(newValue) {
				// if (this.total === 0) return
				if (isNaN(newValue)) return
				uni.setTabBarBadge({
					index: 2,
					text: this.total + ''
				})
			}
		},
		methods: {
			// 映射修改全局变量的方法
			...mapMutations('my_cart', ['updataCart']),
			...mapMutations('my_user', ['updataAddress']),
			// 更新状态
			cartDataUpdataState(index) {
				this.cart[index].goods_state = !this.cart[index].goods_state
				this.updataCart(this.cart)
			},
			// 数量发生改变
			countChange(newValue, index) {
				// console.log(event)
				// event.stopPropagation()
				this.cart[index].goods_count = parseInt(newValue) === 0 ? 1 : parseInt(newValue)
				this.updataCart(this.cart)
			},
			// 删除购物车
			swipeActionClickHandler(index) {
				// this.cart = this.cart.filter((item, i) => i !== index)
				// console.log(this.cart)
				this.updataCart(this.cart.filter((item, i) => i !== index))
			},
			// 点击添加收货地址
			async chooseAddress() {
				const [err, succ] = await uni.chooseAddress().catch(err => err)
				if (succ && succ.errMsg === 'chooseAddress:ok') {
					this.updataAddress(succ)
				}
				if (err && (err.errMsg === 'chooseAddress:fail auth deny' || err.errMsg ===
						'chooseAddress:fail authorize no response')) {
					// 3.1 提示用户对地址进行授权
					const [err2, confirmResult] = await uni.showModal({
						content: '检测到您没打开地址权限，是否去设置打开？',
						confirmText: "确认",
						cancelText: "取消",
					})

					// 3.2 如果弹框异常，则直接退出
					if (err2) return

					// 3.3 如果用户点击了 “取消” 按钮，则提示用户 “您取消了地址授权！”
					if (confirmResult.cancel) return uni.$showMsg('您取消了地址授权！')

					// 3.4 如果用户点击了 “确认” 按钮，则调用 uni.openSetting() 方法进入授权页面，让用户重新进行授权
					if (confirmResult.confirm) {
						uni.openSetting({
							// 3.4.1 授权结束，需要对授权的结果做进一步判断
							success: (settingResult) => {
								console.log('ok')
								// 3.4.2 地址授权的值等于 true，提示用户 “授权成功”
								if (settingResult.authSetting['scope.address']) return uni.$showMsg('授权成功！请选择地址')
								// 3.4.3 地址授权的值等于 false，提示用户 “您取消了地址授权”
								if (!settingResult.authSetting['scope.address']) return uni.$showMsg('您取消了地址授权！')
							}
						})
					}
				}
			},
			// 点击商品跳转到详情页
			gotoDetail(item) {
				uni.navigateTo({
					url:'/subpkg/goods_detail/goods_detail?goods_id='+item.goods_id
				})
			}
		}
	}
</script>

<style lang="scss">
	.cart-container {
		width: 100%;
		box-sizing: border-box;
		padding-bottom: 100rpx;

		.cart-adress {
			.btn {
				height: 180rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.adress {
				font-size: 24rpx;
				height: 180rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				padding: 0 10rpx;
				position: relative;

				&::after {
					content: '点击更换地址';
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					background-color: #000;
					opacity: .1;
					text-align: center;
					line-height: 100%;
					color: #FFF;
					font-size: 30rpx;
					padding-top: 20rpx;
				}

				.row1 {
					display: flex;
					justify-content: space-between;

					.phone {
						margin-right: 10rpx;
					}
				}

				.row2 {
					display: flex;
					align-items: center;
					margin-top: 20rpx;

					.adr {
						white-space: nowrap;
						margin-right: 20rpx;
					}
				}
			}

			image {
				width: 100%;
				height: 20rpx;
			}

		}

		.cart-icon {
			height: 80rpx;
			display: flex;
			align-items: center;
			font-size: 28rpx;
			padding-left: 10rpx;
			border-bottom: 2rpx solid #efefef;

			text {
				margin-left: 20rpx;
			}
		}

		.cart-goods {
			width: 100%;

			.cart-list-item {
				width: 100%;
				display: flex;
				padding: 10rpx 20rpx;
				border-bottom: 2rpx solid #efefef;

				.radio {
					line-height: 200rpx;

					radio {
						transform: scale(0.8);
					}
				}

				.cart-list-item-left {
					margin-right: 20rpx;

					.cart-pic {
						width: 200rpx;
						height: 200rpx;
						display: block;
					}
				}

				.cart-list-item-right {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					flex: 1;

					.cart-title {
						font-size: 26rpx;
					}

					.cart-price {
						width: 100%;
						font-size: 32rpx;
						color: #c00000;
						display: flex;
						align-items: center;
						justify-content: space-between;
					}
				}
			}
		}

		.emptyImg {
			display: block;
			margin: 160rpx auto;
		}
	}
</style>
